<template>
  <div class="container">
    <div class="title-container">
      报警检测
      <img
        class="title-img"
        style="height: 70px; width: 100%"
        src="../../../assets/imgs/head1.png"
      />
      <div class="bottom-line"></div>
    </div>

    <div class="searchBox">
      <el-form
        :inline="true"
        :model="searchForm"
        class="search-form"
        size="mini"
      >
        <el-form-item label="日期:" class="label-color">
          <el-date-picker
            v-model="searchForm.startDate"
            size="mini"
            style="width: 128px"
            type="date"
            placeholder="开始日期"
          />
          <span
            style="
              margin-left: 10px;
              color: #fff;
              font-weight: bold;
              margin-right: 10px;
            "
            >--</span
          >
          <el-date-picker
            v-model="searchForm.endDate"
            size="mini"
            style="width: 128px"
            type="date"
            placeholder="结束日期"
          />
        </el-form-item>

        <el-form-item label="站点">
          <el-select v-model="searchForm.region" placeholder="选择站点">
            <el-option label="特一联" value="shanghai" />
            <el-option label="特二联" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="dataContainer">
      <div class="block">
        <div class="panel-footer"></div>
        <div class="block-title">XX平台</div>
        <!-- <img class="letf-triangle" src="../../../assets/imgs/triangle.svg" />
        <img class="right-triangle" src="../../../assets/imgs/triangle.svg" /> -->
        <div class="search-box">
          <el-form :inline="true" :model="searchForm" class="search-form">
            <el-form-item label="站点">
              <el-select
                v-model="searchForm.region"
                size="mini"
                style="width: 100px"
                placeholder="选择站点"
              >
                <el-option label="特一联" value="shanghai" />
                <el-option label="特二联" value="beijing" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button size="mini" type="primary" @click="onSubmit"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
          <span class="more" @click="openDialog">查看所有>></span>
        </div>
        <div class="table">
          <el-table
            :data="dataFrom"
            style="width: 100%"
            :header-row-style="tableHeadStyle"
            :row-style="tableRowStyle"
            :cell-style="columnStyle"
            :header-cell-style="headerStyle"
          >
            <el-table-column
              prop="name"
              fixed="left"
              label="报警概述"
              width="130"
            />
            <el-table-column prop="station" label="站点" width="130" />
            <el-table-column prop="resource" label="报警源" width="100" />
            <el-table-column prop="level" label="级别" width="60">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.level == 1" size="mini" effect="dark"
                  >1级</el-tag
                >
                <el-tag
                  v-else-if="scope.row.level == 2"
                  size="mini"
                  effect="dark"
                  type="warning"
                  >2级</el-tag
                >
                <el-tag v-else size="mini" effect="dark" type="danger"
                  >3级</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="date" label="时间" width="130" />
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="handleClick(scope.row)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="block">
        <div class="panel-footer"></div>
        <div class="block-title">XX平台</div>
        <!-- <img class="letf-triangle" src="../../../assets/imgs/triangle.svg" />
        <img class="right-triangle" src="../../../assets/imgs/triangle.svg" /> -->
        <div class="search-box">
          <el-form :inline="true" :model="searchForm" class="search-form">
            <el-form-item label="站点">
              <el-select
                v-model="searchForm.region"
                size="mini"
                style="width: 100px"
                placeholder="选择站点"
              >
                <el-option label="特一联" value="shanghai" />
                <el-option label="特二联" value="beijing" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button size="mini" type="primary" @click="onSubmit"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
          <span class="more" @click="openDialog">查看所有>></span>
        </div>
        <div class="table">
          <el-table
            :data="dataFrom"
            style="width: 100%"
            :header-row-style="tableHeadStyle"
            :row-style="tableRowStyle"
            :cell-style="columnStyle"
            :header-cell-style="headerStyle"
          >
            <el-table-column
              prop="name"
              fixed="left"
              label="报警概述"
              width="130"
            />
            <el-table-column prop="station" label="站点" width="130" />
            <el-table-column prop="resource" label="报警源" width="100" />
            <el-table-column prop="level" label="级别" width="60">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.level == 1" size="mini" effect="dark"
                  >1级</el-tag
                >
                <el-tag
                  v-else-if="scope.row.level == 2"
                  size="mini"
                  effect="dark"
                  type="warning"
                  >2级</el-tag
                >
                <el-tag v-else size="mini" effect="dark" type="danger"
                  >3级</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="date" label="时间" width="130" />
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="handleClick(scope.row)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="block">
        <div class="panel-footer"></div>
        <div class="block-title">XX平台</div>
        <!-- <img class="letf-triangle" src="../../../assets/imgs/triangle.svg" />
        <img class="right-triangle" src="../../../assets/imgs/triangle.svg" /> -->
        <div class="search-box">
          <el-form :inline="true" :model="searchForm" class="search-form">
            <el-form-item label="站点">
              <el-select
                v-model="searchForm.region"
                size="mini"
                style="width: 100px"
                placeholder="选择站点"
              >
                <el-option label="特一联" value="shanghai" />
                <el-option label="特二联" value="beijing" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button size="mini" type="primary" @click="onSubmit"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
          <span class="more" @click="openDialog">查看所有>></span>
        </div>
        <div class="table">
          <el-table
            :data="dataFrom"
            style="width: 100%"
            :header-row-style="tableHeadStyle"
            :row-style="tableRowStyle"
            :cell-style="columnStyle"
            :header-cell-style="headerStyle"
          >
            <el-table-column
              prop="name"
              label="报警概述"
              fixed="left"
              width="130"
            />
            <el-table-column prop="station" label="站点" width="130" />
            <el-table-column prop="resource" label="报警源" width="100" />
            <el-table-column prop="level" label="级别" width="60">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.level == 1" size="mini" effect="dark"
                  >1级</el-tag
                >
                <el-tag
                  v-else-if="scope.row.level == 2"
                  size="mini"
                  effect="dark"
                  type="warning"
                  >2级</el-tag
                >
                <el-tag v-else size="mini" effect="dark" type="danger"
                  >3级</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="date" label="时间" width="130" />
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="handleClick(scope.row)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!-- dialog对话框 -->
    <div class="dialog-container">
      <el-dialog
        title="详细报警数据"
        :visible.sync="dialogVisible"
        width="80%"
        :before-close="handleClose"
      >
        <div style="height: 650px">
          <div class="dialog-search-box">
            <el-form
              :inline="true"
              :model="dialogSearchForm"
              class="search-form"
              size="mini"
            >
              <el-form-item label="站点:" style="margin-right: 20px">
                <el-select
                  v-model="dialogSearchForm.region"
                  placeholder="选择站点"
                >
                  <el-option label="特一联" value="shanghai" />
                  <el-option label="特二联" value="beijing" />
                </el-select>
              </el-form-item>
              <el-form-item label="报警类型" style="margin-right: 10px">
                <el-select
                  v-model="dialogSearchForm.type"
                  placeholder="报警类型"
                >
                  <el-option label="特一联" value="shanghai" />
                  <el-option label="特二联" value="beijing" />
                </el-select>
              </el-form-item>

              <el-form-item label="日期:" style="margin-right: 20px">
                <el-date-picker
                  v-model="dialogSearchForm.startDate"
                  size="mini"
                  style="width: 128px"
                  type="date"
                  placeholder="开始日期"
                />
                <span
                  style="
                    margin-left: 10px;
                    color: #fff;
                    font-weight: bold;
                    margin-right: 10px;
                  "
                  >--</span
                >
                <el-date-picker
                  v-model="dialogSearchForm.endDate"
                  size="mini"
                  style="width: 128px"
                  type="date"
                  placeholder="结束日期"
                />
              </el-form-item>

              <el-form-item label="站点" style="margin-right: 20px">
                <el-select
                  v-model="dialogSearchForm.region"
                  placeholder="选择站点"
                >
                  <el-option label="特一联" value="shanghai" />
                  <el-option label="特二联" value="beijing" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="dialog-table">
            <el-table :data="dialogTableData" style="width: 100%">
              <el-table-column prop="station" label="站点" width="150" />
              <el-table-column prop="resource" label="报警源" width="150" />
              <el-table-column prop="name" label="报警概述" width="200" />
              <el-table-column prop="data" label="数据" width="80" />
              <el-table-column prop="level" label="级别" width="80">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.level == 1" size="mini" effect="dark"
                    >1级</el-tag
                  >
                  <el-tag
                    v-else-if="scope.row.level == 2"
                    size="mini"
                    effect="dark"
                    type="warning"
                    >2级</el-tag
                  >
                  <el-tag v-else size="mini" effect="dark" type="danger"
                    >3级</el-tag
                  >
                </template>
              </el-table-column>
              <el-table-column prop="date" label="时间" />
              <!-- <el-table-column prop="name" label="关联数据" width="130"
                >点此查看
              </el-table-column> -->
              <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="handleClick(scope.row)"
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      searchForm: {},
      dialogSearchForm: {},
      dialogTableData: [
        {
          name: "蒸馏塔温度过高",
          resource: "蒸馏塔A",
          station: "采油1站",
          data:145,
          date: "2024/07/16 12:13",
          level: 1,
        },
        {
          name: "蒸馏塔温度过高",
          resource: "蒸馏塔A",
          station: "采油1站",
          data:145,
          date: "2024/07/16 12:13",
          level: 2,
        },
        {
          name: "蒸馏塔温度过高",
          resource: "蒸馏塔A",
          station: "采油1站",
          data:145,
          date: "2024/07/16 12:13",
          level: 3,
        },
        {
          name: "蒸馏塔温度过高",
          resource: "蒸馏塔A",
          station: "采油1站",
          data:145,
          date: "2024/07/16 12:13",
          level: 3,
        },
        {
          name: "蒸馏塔温度过高",
          resource: "蒸馏塔A",
          station: "采油1站",
          data:145,
          date: "2024/07/16 12:13",
          level: 3,
        },
        {
          name: "蒸馏塔温度过高",
          resource: "蒸馏塔A",
          station: "采油1站",
          data:145,
          date: "2024/07/16 12:13",
          level: 3,
        },
        {
          name: "蒸馏塔温度过高",
          resource: "蒸馏塔A",
          station: "采油1站",
          data:145,
          date: "2024/07/16 12:13",
          level: 3,
        },
        {
          name: "蒸馏塔温度过高",
          resource: "蒸馏塔A",
          station: "采油1站",
          data:145,
          date: "2024/07/16 12:13",
          level: 3,
        },
      ],
      dataFrom: [
        {
          name: "蒸馏塔温度过高",
          resource: "蒸馏塔A",
          station: "采油1站",
          date: "2024/07/16 12:13",
          level: 1,
        },

        {
          name: "蒸馏塔温度过高",
          resource: "蒸馏塔A",
          station: "采油1站",
          date: "2024/07/16 12:13",
          level: 2,
        },
        {
          name: "蒸馏塔温度过高",
          resource: "蒸馏塔A",
          station: "采油1站",
          date: "2024/07/16 12:13",
          level: 3,
        },
        {
          name: "蒸馏塔温度过高",
          resource: "蒸馏塔A",
          station: "采油1站",
          date: "2024/07/16 12:13",
          level: 2,
        },
        {
          name: "蒸馏塔温度过高",
          resource: "蒸馏塔A",
          station: "采油1站",
          date: "2024/07/16 12:13",
          level: 3,
        },
        {
          name: "蒸馏塔温度过高",
          resource: "蒸馏塔A",
          station: "采油1站",
          date: "2024/07/16 12:13",
          level: 2,
        },
        {
          name: "蒸馏塔温度过高",
          resource: "蒸馏塔A",
          station: "采油1站",
          date: "2024/07/16 12:13",
          level: 3,
        },
        {
          name: "蒸馏塔温度过高",
          resource: "蒸馏塔A",
          station: "采油1站",
          date: "2024/07/16 12:13",
          level: 3,
        },
        {
          name: "蒸馏塔温度过高",
          resource: "蒸馏塔A",
          station: "采油1站",
          date: "2024/07/16 12:13",
          level: 3,
        },
        {
          name: "蒸馏塔温度过高",
          resource: "蒸馏塔A",
          station: "采油1站",
          date: "2024/07/16 12:13",
          level: 3,
        },
        {
          name: "蒸馏塔温度过高",
          resource: "蒸馏塔A",
          station: "采油1站",
          date: "2024/07/16 12:13",
          level: 3,
        },
      ],
      tableHeadStyle: {
        "font-size": "14px",
        color: "#fff",
      },
      tableRowStyle: {
        color: "#fff",
      },
    };
  },
  mounted() {},
  methods: {
    openDialog() {
      this.dialogVisible = !this.dialogVisible;
    },
    columnStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 5) {
        return "background:rgba(0,0,0,0.75)";
      }
    },
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 5) {
        return "background:rgba(0,0,0,0.75)";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  background-color: #02104f;
  border: 1px solid #797979;
}
.title-container {
  height: 80px;
  position: relative;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  line-height: 60px;
  color: white;
  .title-img {
    position: absolute;
    top: 0;
    left: 0;
  }
  .bottom-line {
    position: absolute;
    height: 8px;
    width: 300px;
    border-radius: 5px;
    background-color: aqua;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: auto;
  }
}
.searchBox {
  padding: 10px 10px;
  background: url(../../../assets/imgs/line.png) rgba(255, 255, 255, 0.04);
  .search-form {
    ::v-deep .el-form-item__label {
      color: #6da7f0;
    }
    ::v-deep .el-input__inner {
      background-color: transparent !important;
      border: 1px solid #75f9fd;
    }
  }
}
.dataContainer {
  padding: 10px 10px;
  width: 100%;
  height: calc(100% - 150px);
  display: flex;
  justify-content: space-around;
  align-items: center;
  .block {
    width: 32%;
    height: 100%;
    background-color: #0b1539;
    position: relative;
    .block-title {
      height: 50px;
      width: 100%;
      color: #fff;
      line-height: 50px;
      font-size: 22px;
      font-weight: bold;
      background: url(../../../assets/imgs/title_1.png) no-repeat;
      background-size: cover;
    }
    .letf-triangle {
      width: 42px;
      height: 42px;
      display: block;
      transform: translate(0px, 0.3px) rotate(0deg) scaleX(-1);
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .right-triangle {
      width: 42px;
      height: 42px;
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 2;
    }
    .search-box {
      padding: 7px 7px;
      position: relative;
      .more {
        color: #50b3ec;
        font-size: 15px;
        position: absolute;
        right: 15px;
        top: 15px;
      }
      ::v-deep .el-form-item__label {
        color: #6da7f0;
      }
      ::v-deep .el-input__inner {
        background-color: transparent !important;
        border: 1px solid #75f9fd;
      }
    }
    .table {
      overflow: auto;
      height: calc(100% - 50px);
    }
    .panel-footer {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      &::before {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 30px;
        height: 30px;
        border-left: 3px solid #02a6b5;
        border-bottom: 3px solid #02a6b5;
        content: "";
      }
      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 30px;
        height: 30px;
        border-right: 3px solid #02a6b5;
        border-bottom: 3px solid #02a6b5;
        z-index: 9;
        content: "";
      }
    }

    ::v-deep .el-table,
    ::v-deep .el-table tr,
    ::v-deep .el-table th {
      background-color: transparent;
    }
    ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
      background-color: #212e3e !important;
    }
    ::v-deep .el-table__body tr.hover-row > td {
      background-color: #212e3e !important;
    }
  }
}
.left-tangle {
  height: 0;
  width: 0;
  border: 20px solid #173279;
  border-top-color: transparent;
  border-right-color: transparent;
  position: absolute;
  left: 0;
  bottom: 0;
}
.dialog-container {
  height: 100%;
}
</style>
